<template>
  <a-modal
    :maskClosable="maskClosable"
    title="调度日志"
    width="70VW"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div class="btn-group">
      <div class="tips">
        <img src="@assets/securityServiceTopo/datacenter.svg" />
        {{ model.srcDatacenterName }}
        <img
          src="@assets/tranfering.gif"
          style="height: 40px; margin: 0 20px"
        />
        <img src="@assets/securityServiceTopo/datacenter.svg" />
        {{ model.dstDatacenterName }}
      </div>
      <a-button
        class="refresh-btn"
        size="small"
        icon="reload"
        @click="loadData"
      >
        刷新
      </a-button>
    </div>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :loading="loading"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="false"
      @change="gHandleTableChange"
    >
      <span slot="result" slot-scope="text, record">
        <template v-if="record.statusName === '成功'">
          <a-icon type="check-circle" style="color: #15ed15; font-size: 18px" />
        </template>
        <template v-else-if="record.statusName === '进行中'">
          <!-- <a-icon type="loading" style="color: #40a9ff; font-size: 18px" /> -->
          <a-spin />
        </template>
        <template v-else>
          <a-tooltip placement="topLeft" :title="record.resultMsg || ''">
            <span>
              <a-icon type="close-circle" style="color: red; font-size: 18px" />
              {{ record.resultMsg || "" }}
            </span>
          </a-tooltip>
        </template>
      </span>
      <span slot="action" slot-scope="text, record">
        <template v-if="record.status !== 2">
          <a-button icon="redo" size="small" type="link" disabled>
            重新执行
          </a-button>
        </template>
        <template v-else>
          <a-popconfirm
            title="确定重新执行吗?"
            @confirm="() => handleStepRestart(record)"
          >
            <a-button icon="redo" size="small" type="link">重新执行</a-button>
          </a-popconfirm>
        </template>
      </span>
    </a-table>
  </a-modal>
</template>
<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "DetailModal",
  mixins: [GwListMixin],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      loading: false,
      model: {},
      columns: [
        {
          title: "监控项",
          width: 230,
          dataIndex: "name",
        },
        {
          title: "进度",
          align: "center",
          dataIndex: "statusName",
          ellipsis: true,
          scopedSlots: { customRender: "result" },
        },
        {
          title: "开始时间",
          dataIndex: "beginTime",
        },
        {
          title: "结束时间",
          dataIndex: "endTime",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      url: {
        list: "/scheduler/step/list1",
      },
      maskClosable: false,
    };
  },
  methods: {
    showModal(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
      this.loadData();
    },
    loadData() {
      this.gDataSource = [];
      this.gQueryParam.schedulerJobId = this.model.id;
      this.loading = true;
      gPostAction(this.url.list, this.gQueryParam)
        .then((res) => {
          const data = res.data;
          if (data) {
            this.gDataSource = data;
            // this.gPagination.total = data.totalCount
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleStepRestart(record) {
      const data = {
        schedulerJobStepId: record.id,
        // title: "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-L2层：IT设备"
      };
      gPostAction("/step/stepRestart", data).then((res) => {
        if (res.success) {
          this.$message.success("操作成功");
          this.loadData();
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>

<style
  lang="less"
  scoped
>
.btn-group {
  .tips {
    display: inline-block;
  }

  .refresh-btn {
    float: right;
    margin-bottom: 20px;
  }
}
</style>